<template>
	<view class="container">
<!-- 
		<u-navbar leftIcon="" leftIconSize="0px"   bgColor="rgba(0,0,0,0)">
			 	<slot>
				 <uni-icons  class="backicon" type="back"  size="24" color="#ffffff"
					 @click="goBack"></uni-icons>
					</slot>
			 </u-navbar> -->
   <!--  -->
<!-- <uni-nav-bar    :back="true" left-icon="left"  /> -->

		<u-navbar leftIcon="" leftIconSize="0px" :background="{background: 'transparent'}"  :borderBottom="false" immersive>
			<slot>
				<image :src="expert.avatar" class="profile-image"></image>
				<text class="mentor-name">{{expert.name}}</text>
			</slot>
		</u-navbar>


	<!-- <uni-nav-bar left-text="返回" right-text="设置" title="标题" /> -->

		<swiper class="swiper" vertical :current="currentVideoIndex" @change="handleSwiperChange"
			:disable-touch="showComment">

			<swiper-item v-for="(video, index) in videoList" :key="index">

				<view class="video-container">
					<!-- 视频内容 -->
					<video :id="'videoRef' + index" class="video" :src="video.videoUrl" :poster="video.cover"
						object-fit="cover" show-play-btn=false :controls="false" @click="togglePlay"
						@ended="handleVideoEnd(index,video.id)" @timeupdate="bindtimeupdate"></video>
					<!-- <progress style="z-index: 2000;" class="video-progress" value="20" max="100"></progress> -->

					<view class="pause-icon" v-if="!isPlaying && currentVideoIndex === index" @click.stop="togglePlay">
						<view>
							<image style="width:50px;height:50px"
								src="https://cdn.zkjialan.com/uploads/images/20250409/20250409181249707040976.png"
								mode="widthFix"></image>
						</view>
					</view>


					<!-- 		<view class="play-button" v-if="!isPlaying && currentVideoIndex === index" @click.stop="togglePlay">
					  
					</view> -->

					<!-- 右侧操作栏 -->
					<view class="right-actions">
						<!-- 用户头像 -->
						<view class="user-avatar" :style="{'backgroundImage':'url('+video.bgimg +')'}"
							style="border: 1px solid white;">
							<image :src="video.avatar" mode="aspectFill"></image>
						</view>

						<view class="action-item">
							<image style="width: 27px;" mode="widthFix"
								src="https://cdn.zkjialan.com/uploads/images/20250409/202504091547258c1ab5898.png">
							</image>
							<!-- <uni-icons type="eye-filled" size="30" color="#ffffff"></uni-icons> -->
							<text class="action-num">{{video.views || 0}}</text>
						</view>

						<!-- 互动图标 -->
						<view class="action-item" @click="toggleLike(index,video.id)">

							<image v-if="video.isLiked" style="width: 27px;" mode="widthFix"
								src="https://cdn.zkjialan.com/uploads/images/20250409/2025040916153308a6f4747.png">
							</image>
							<image v-else="video.isLiked" style="width: 27px;" mode="widthFix"
								src="https://cdn.zkjialan.com/uploads/images/20250409/20250409161533eaf529822.png">
							</image>
							<text class="action-num">{{video.likes}}</text>
						</view>


						<view class="action-item" @click="openCommentModal(video.id)">
							<image style="width: 27px;" mode="widthFix"
								src="https://cdn.zkjialan.com/uploads/images/20250409/2025040916224753f980319.png">
							</image>
							<text class="action-num">{{video.comments}}</text>
						</view>

						<view class="action-item" @click="handleShare(video.id)">
							<button class="share-button" open-type="share">
								<image style="width: 27px;" mode="widthFix"
									src="https://cdn.zkjialan.com/uploads/images/20250409/20250409161533470060891.png">
								</image>
							</button>
							<text class="action-num">分享</text>
						</view>


						<button open-type="share" class="hidden-share-btn" v-if="isWeixin"
							@click="preventDefault"></button>

					</view>

					<!-- 积分进度条 -->
					<view class="bonus-wrapper">
						<view class="bonus" data-show="1">
							<view class="bonus-inner" :style="bonusStyle"></view>
							<image class="icon" v-if="success" @click="dianji()" :src="successIcon" mode="aspectFill" />
							<image class="icon" v-if="!success" :src="defaultIcon" mode="aspectFill" />

							<view class="tip" v-if="success" @click="dianji()">点击领取</view>
							<view class="tip" v-if="!success">观看得积分</view>
						</view>
					</view>



					<!-- 底部信息 -->
					<view class="bottom-info">

						<!-- 购买区域 -->
						<view class="buy-container" :class="{'buy-area-show': isShowBuyArea}" v-if="video.type!=1">
							<view class="buy-user-info">
								<image class="buy-avatar" v-if="video.type==2" :src="video.goodsinfo.image"
									mode="aspectFill"></image>

								<view class="author-view" v-if="video.type!=2"
									:style="{'backgroundImage':'url('+video.bgimg +')'}">
									<image :src="video.avatar" class="author-avatar" style="width: 100%;"
										mode="widthFix"></image>
								</view>
								<!-- <image class="buy-avatar" v-if="video.type!=2" :src="video.avatar" mode="aspectFill"> -->
								<!-- </image> -->
								<view class="buy-text">
									<text class="buy-title" style="overflow: hidden;"
										v-if="video.type==2">{{video.goodsinfo.name}}</text>
									<text class="buy-desc" v-if="video.type==3">{{video.author}}</text>
								</view>
							</view>
							<view class="buy-btn" @click="openQRModal(video)">
								<text v-if="video.type==2">立即购买</text>
								<text v-if="video.type==3">立即联系</text>
								<text v-if="video.type==4">立即查看</text>
							</view>
						</view>


						<view class="title">@
							<text style="margin-left: 10px;">{{video.author}}</text>
						</view>
						<!-- <view class="desc">{{video.info}}</view> -->

						<view class="desc-container">
							<view class="desc" :class="{'desc-expanded': isExpanded}">{{video.info}}</view>
							<view class="expand-btn" v-if="needExpand" @click.stop="toggleExpand">
								{{ isExpanded ? '收起' : '展开' }}
							</view>
						</view>




					</view>
				</view>
			</swiper-item>
		</swiper>




		<!-- 二维码弹窗 -->
		<view class="qr-modal" v-if="showQRCode" @click.stop="closeQRModal">
			<view class="<!-- modal-content -->" @click.stop>
				<view class="close-btn" @click="closeQRModal" style="z-index: 999;;">
					<uni-icons type="closeempty" size="26" color="#ffffff"></uni-icons>
				</view>
				<image class="qr-image" :src="ewmimgurl" mode="aspectFit"></image>
			</view>
		</view>

		<!-- 评论弹窗 -->
		<view class="comment-modal" v-if="showComment" @click.stop="closeCommentModal">
			<view class="comment-content" @click.stop>
				<view class="comment-body">
					<view class="comment-header">
						<text class="comment-title">{{comments.length}}条评论</text>
						<view class="close-comment" @click="closeCommentModal">
							<uni-icons type="closeempty" size="20"></uni-icons>
						</view>
					</view>

					<scroll-view class="comment-list" scroll-y>
						<view class="comment-item" v-for="(comment, index) in comments" :key="index">
							<view class="comment-user">
								<image class="comment-avatar" :src="comment.avatar"></image>
								<view class="comment-info">
									<text class="comment-name">{{comment.nickname}}</text>

								</view>
								<text v-if="comment.user_id==userinfo.id" class="delete-btn"
									@click="deleteComment(index,comment.id)">删除</text>
							</view>
							<view class="comment-text">{{comment.content}}</view>
							<text class="comment-time">{{comment.create_time}}</text>
						</view>
						<view class="no-comment" v-if="comments.length === 0">
							<text>还没有更多评论</text>
						</view>
					</scroll-view>
				</view>

				<view class="comment-input-area">
					<image class="input-avatar" :src="userinfo.avatar" mode="aspectFill"></image>
					<input type="text" v-model="commentText" placeholder="善语似良药, 恶言像寒霜" class="comment-input" />
					<view class="send-btn" :class="{'send-btn-active': commentText.trim()}" @click="sendComment">发送
					</view>
				</view>
			</view>
		</view>


		<!--  -->
		<!-- 积分弹窗 -->
		<view class="mask" v-if="isShowModal&&!enoughjifen">
			<view class="card">
				<!-- style="background-image:url('https://cdn.zkjialan.com/uploads/images/20250409/20250409153127acfaa4999.png');
				background-size: cover;" -->

				<image class="bg-img" src="https://cdn.zkjialan.com/uploads/images/20250409/20250409153127acfaa4999.png"
					mode="widthFix" />

				<view class="close" @click="handleCloseModal">
					<text class="iconfont icon-guanbi1">×</text>
				</view>
				<image class="card-img" style=""
					src="https://cdn.zkjialan.com/uploads/images/20250409/202504091511248ffbd1941.png"
					mode="aspectFill" />

				<view style="margin-top: 30px;">
					<view class="card-msg" style="font-size: 16px; color: black; color: rgb(0, 0, 0);
					 ">
						恭喜获得<text class="num1">{{config.videojifen}}</text>积分
					</view>
					<view class="card-msg" style="color: black;  color: rgb(0, 0, 0);">
						邀请新用户浏览此视频，还可获得<text class="num2">{{config.invitevideojifen}}</text>积分
					</view>
				</view>
				<view class="card-btn" style="" hover-class="hover" @click="getJifen()">
					点击领取
				</view>
			</view>
		</view>




	</view>
</template>

<script>
	import Cache from "@/utils/cache";

	export default {
		data() {
			return {
				 navBarHeight: 44,    // 导航栏默认高度（iOS）
				totalNavHeight: 0    ,// 总高度（状态栏+导航栏）
				can_dianji: true,
				
				isWeixin: false,
				isExpanded: false,
				needExpand: true,
				ewmimgurl: '',
				userinfo: [],
				baseUrl: `http://localhost:82/`,
				currentVideoIndex: 0,
				videoList: [],
				avatarUrl: '',
				isPlaying: true,
				showQRCode: false,
				showComment: false,
				comments: [],
				commentText: '',
				isShowBuyArea: true,
				isShowModal: false,
				video_id: 0,
				config: {},
				from_id: 0,
				total: 0,
				enoughjifen: false,
				user_id: 0,
				expert_id: 0,
				defaultIcon: 'https://cos-a.jialanhealth.com/images/92/2024/05/g4yzm2Ix7bXyZi00txyYt6zt02V93s.png',
				successIcon: 'https://cos-a.jialanhealth.com/images/92/2024/05/Y1VDEhYw1tvYPe0eTHIkk1etTpWw0H.png',
				bonusIcon: 'https://cos-a.jialanhealth.com/images/92/2024/05/w99U1dI26dDu0727cTMyJSZwu978Mo.png',
				bonusStyle: "background-image: conic-gradient(#ff4a4a 0%, transparent 0)",
				progress: 0,
				success: false,
				currentTime: 0, //播放进度时长
				videoDuration: 0,
				duration: 0, //视频时长

			}
		},
		mounted() {
			this.checkNeedExpand();
		},
		onShow() {


			const pages = getCurrentPages();
			const currentPage = pages[pages.length - 1];
			// 检查是否有分享参数
			if (currentPage.options) {
				console.log('接收的参数1', currentPage.options)
				const {
					from_id,
					video_id,
					expert_id
				} = currentPage.options;
				if (from_id && from_id !== this.from_id) {
					this.from_id = from_id;
					uni.setStorageSync("from_id", this.from_id);
				}
				if (expert_id && expert_id !== this.expert_id) {
					this.expert_id = expert_id;
				}
				if (video_id && video_id !== this.video_id) {
					this.sharevideo_id = video_id;
					this.video_id = video_id;
				}
			}
			this.initVideoData()


		},
		onLoad(query) {
			
			   const systemInfo = uni.getSystemInfoSync()
			    this.statusBarHeight = systemInfo.statusBarHeight || 0
			    
			    // 设置胶囊按钮位置
			    const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
			    this.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height
			 this.totalNavHeight = this.statusBarHeight + this.navBarHeight
			 
			console.log('接收的参数2', query)
			if (query.expert_id) {
				this.expert_id = query.expert_id;
			}
			this.user_id = Cache.get("userId")
			this.initVideoData()
			// var videoinfo = uni.getStorageSync("videoinfo")
			// videoinfo = JSON.parse(videoinfo)
			// this.videoList.unshift(videoinfo);
			// this.videoList = JSON.parse(JSON.stringify(this.videoList))
			// console.log('赋值后', JSON.parse(JSON.stringify(this.videoList))); // 去除 Observer

		},

		onReady() {
			// 再次确保视频播放
			this.autoPlayVideo();
		},


		watch: {
			'currentVideoIndex'() {
				this.isExpanded = false;
				this.checkNeedExpand();
			}
		},
		onShareAppMessage(res) {

			if (!this.user_id) {
				this.login()
			}

			// 来自页面内分享按钮
			const currentVideo = this.videoList[this.currentVideoIndex];

			return {
				title: currentVideo.name,
				path: '/course/videohealth/videohealth?video_id=' + currentVideo.id + '&from_id=' + this.user_id +
					'&expert_id=' + this.expert_id,
				imageUrl: currentVideo.cover, // 分享图片
				success: function(res) {
					console.log('分享成功', res);
				},
				fail: function(err) {
					console.log('分享失败', err);
				}
			}

		},
		methods: {

			login() {
				if (!this.isLogin)
					return this.$Router.push('/pages/login/login');
				this.user_id = Cache.get("userId")
			},

			//积分进度条
			bindtimeupdate(e) {
				let {
					currentTime,
					duration
				} = e.detail
				let progress = this.progress


				let playTime = e.detail.currentTime
				let llTime = e.detail.duration

				var percent = playTime / llTime * 100



				this.videoList[this.currentVideoIndex].progressp = percent

				if (!this.success) {
					this.bonusStyle = "background-image: conic-gradient(#ff4a4a " + percent + "%, transparent 0)"
				}

				let val = Math.max(progress, 100 * currentTime / duration)
				this.currentTime = currentTime

				if (val != progress) {
					this.progress = val
				}

			},

			updateProgress(event, index) {
				const videoElement = event.target;
				const progress = (videoElement.currentTime / videoElement.duration) * 100;
				this.videoList[index].progress = progress;
			},


			initVideoData() {
				var that = this
				this.$request.get(`course/shortvideo/getAlllist?id=` + this.video_id + '&expert_id=' + this.expert_id)
					.then(
						res => {
							that.videoList = res.data.data.list
							that.videoList.map(video => ({
									...video,
									progressp: 0
								})),
								console.log('所有videoList', that.videoList)

							var lang = that.videoList[0].info.length
							that.needExpand = lang > 150;

						})
				this.$request.get(`course/shortvideo/getConfig`).then(res => {
					that.config = res.data.data
					if (that.total >= that.config.totaljifen) {
						that.enoughjifen = true
					}
				})
				this.$request.get(`course/shortvideo/getinit`).then(res => {
					that.total = res.data.data.total
					if (that.total >= that.config.totaljifen) {
						that.enoughjifen = true
					}

				})

				// 获取视频列表数据后立即尝试播放
				this.$nextTick(() => {
					setTimeout(() => {
						this.autoPlayVideo();
					}, 10); // 给一个短暂延时确保视频加载完成
				});
			},
			toggleExpand() {
				this.isExpanded = !this.isExpanded;
			},

			checkNeedExpand() {

				console.log('检测文字')
				// 使用 uni.createSelectorQuery() 代替 querySelector
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.desc').boundingClientRect(rect => {
						if (rect) {
							// 获取一行文本的高度
							const lineHeight = uni.upx2px(40);
							var lang = this.videoList[this.currentVideoIndex].info.length
							// 如果内容高度大于两行
							// this.needExpand = rect.height > (lineHeight * 2);
							this.needExpand = lang > 140;

						}
					}).exec();
				});
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			togglePlay() {
				try {
					const videoContext = uni.createVideoContext(`videoRef${this.currentVideoIndex}`, this);
					if (!videoContext) {
						console.log('未找到视频上下文');
						return;
					}

					if (this.isPlaying) {
						videoContext.pause();
						this.isPlaying = false;
					} else {
						videoContext.play();
						this.isPlaying = true;
					}
				} catch (error) {
					console.log('播放/暂停错误:', error);
				}
			},
			openQRModal(video) {
				if (video.type == 3) {
					this.showQRCode = true;
					this.ewmimgurl = video.ewm
				} else if (video.type == 2) {
					this.$navto.navto('/pages/goods_detail/goods_detail', {
						id: video.goods_id,
						category_id: video.category_id
					})
				} else if (video.type == 1) {

				} else {
					this.$navto.navto('/pages/zhibo/zhibo', {
						live_url: video.live_url,
					})
				}
			},
			closeQRModal() {
				this.showQRCode = false;
			},
			preventDefault() {},
			openCommentModal(id) {
				if (!this.user_id) {
					this.login()
				}
				this.video_id = id
				this.showComment = true;
				var that = this
				this.$request.get(`course/shortvideo/getComments?video_id=` + id).then(res => {
					that.comments = res.data.data.list
					that.userinfo = res.data.data.userinfo
				})

				// 使用nextTick确保DOM更新后再添加动画类
				this.$nextTick(() => {
					setTimeout(() => {
						document.querySelector('.comment-modal').classList.add('comment-modal-show');
					}, 50);
				});
			},
			closeCommentModal() {
				this.showComment = false;
				const modal = document.querySelector('.comment-modal');
				modal.classList.remove('comment-modal-show');
				setTimeout(() => {
					this.showComment = false;
				}, 400); // 等待动画完成
			},
			sendComment() {
				if (!this.commentText.trim())
					return;
				var avatar = this.userinfo.avatar
				var newComment = {
					avatar: avatar,
					nickname: this.userinfo.nickname,
					user_id: this.userinfo.id,
					create_time: '刚刚',
					content: this.commentText
				};
				var that = this
				newComment.video_id = this.video_id
				this.$request.post(`course/shortvideo/addComment`, {
					newComment
				}).then(res => {
					console.log('所有数据', res.data.data.id)
					newComment.id = res.data.data.id
					this.comments.unshift(newComment);
				})
				this.commentText = '';
			},
			toggleLike(index, id) {

				if (!this.user_id) {
					this.login()
				}

				const video = this.videoList[index];
				video.isLiked = !video.isLiked;
				video.likes += video.isLiked ? 1 : -1;

				this.$request.get(`course/shortvideo/toggleLike?video_id=` + id).then(res => {
					console.log('所有数据', res)
				})

			},

			// 切换下一个视频
			handleSwiperChange(e) {
				try {
					// 暂停当前视频
					const lastVideoContext = uni.createVideoContext(`videoRef${this.currentVideoIndex}`, this);
					if (lastVideoContext) {
						lastVideoContext.pause();
					}

					// 更新索引
					this.currentVideoIndex = e.detail.current;

					// 立即播放新视频
					this.$nextTick(() => {



						const currentVideoContext = uni.createVideoContext(`videoRef${this.currentVideoIndex}`,
							this);
						if (currentVideoContext) {
							currentVideoContext.play();
							this.isPlaying = true;
							this.success = false;
							this.checkNeedExpand();
						}

					});
				} catch (error) {
					console.log('切换视频错误:', error);
				}
			},
			deleteComment(index, id) {
				this.comments.splice(index, 1);
				this.$request.get(`course/shortvideo/deleteComment?id=` + id).then(res => {
					console.log('所有数据', res)
				})
			},


			handleShare(id) {

				// console.log('所有数据')
				// this.$request.get(`course/shortvideo/addSharenum?id=` + id).then(res => {
				// 	console.log('所有数据', res)
				// })

				// uni.share({
				// 	title: '分享标题',
				// 	path: '/pages/course/video/video?from_id=' + this.user_id, // 指定路径，并在其中携带参数
				// });

			},

			dianji() {



				if (this.can_dianji) {
					this.isShowModal = true;
					this.can_dianji = false
				}
			},
			handleVideoEnd(index, id) {
				if (this.videoList[index]) {
					if (!this.videoList[index].views) {
						this.videoList[index].views = 0;
					}
					this.videoList[index].views++;
					this.$request.get(`course/shortvideo/addviews?video_id=` + id).then(res => {})
				}
				this.success = true

				const videoContext = uni.createVideoContext(`videoRef${index}`, this);
				if (videoContext) {
					videoContext.pause();
					this.isPlaying = false;
				}

			},
			handleCloseModal() {
				this.isShowModal = false;

				const videoContext = uni.createVideoContext(`videoRef${this.currentVideoIndex}`, this);
				if (videoContext) {
					videoContext.seek(0);
					videoContext.play();
					this.isPlaying = true;
				}
			},
			getJifen() {
				var that = this
				this.$request.post(`course/shortvideo/getJifen`, {
					shareid: that.form_id,
					video_id: that.video_id
				}).then(res => {
					that.total = res.data.data.total
					if (that.total >= that.config.totaljifen) {
						that.enoughjifen = true
					}
					console.log('领取积分')
				})

				this.isShowModal = false;
				const videoContext = uni.createVideoContext(`videoRef${this.currentVideoIndex}`, this);
				if (videoContext) {
					videoContext.seek(0);
					videoContext.play();
					this.isPlaying = true;
				}
			},
			autoPlayVideo() {
				try {
					const videoContext = uni.createVideoContext(`videoRef${this.currentVideoIndex}`, this);
					if (videoContext) {
						videoContext.play();
						this.isPlaying = true;
					}
				} catch (error) {
					console.log('自动播放失败:', error);
				}
			},
			toggleBuyArea(show) {
				this.isShowBuyArea = show;
			},
		}
	}
</script>

<style scoped>

page{
	padding-bottom: 0rpx;
}

	.backicon {
		z-index: 1000;
		position: fixed;
		left: 10px;
		width: 20px;
		top: 10px;
		line-height: 88px;
		height: 88px;
	}

	.bg-img {
		z-index: -1;
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		right: 0;
	}

	.bonus-wrapper {
		position: absolute;
		right: 15px;
		top: 250rpx;
		width: 84rpx;
		height: 84rpx;
	}

	.bonus {
		position: relative;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 50%;
		width: 84rpx;
		height: 84rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bonus-inner {
		position: absolute;
		left: 0;
		top: 0;
		width: 84rpx;
		height: 84rpx;
		border-radius: 50%;
		-webkit-mask: radial-gradient(transparent, transparent 64%, #000 66%);
		mask: radial-gradient(transparent, transparent 64%, #000 66%);
	}

	.icon {
		width: 50rpx;
		height: 50rpx;
	}

	.tip {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translate(-50%, 120%);
		white-space: nowrap;
		/* background-color: rgba(0, 0, 0, .3); */
		color: #ff9933;
		padding: 0.2em 0.8em;
		border-radius: 1em;
		font-size: 0.8em;
	}


	.video-progress {
		width: 100%;
		height: 5px;
		appearance: none;
		position: absolute;
		bottom: 100;
		left: 0;
		background-color: #ccc;
	}

	.video-progress::-webkit-progress-bar {
		background-color: #ccc;
	}

	.video-progress::-webkit-progress-value {
		background-color: #8c9eff;
	}

	.video-progress::-moz-progress-bar {
		background-color: #8c9eff;
	}




	.header-content {
		display: flex;
		align-items: center;
		padding: 0px 20px 0px 0px;
		background-color: #fff;
		// box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.profile-image {
		width: 40px;
		height: 44px;
		border-radius: 50%;
		margin-left: 20px;
	}

	.mentor-name {
		font-size: 18px;
		margin-left: 10px;
	}

	.share-button {
		background: none;
		border: none;
		padding: 0;
		margin: 0;
		line-height: 1;
		color: #fff;
	}

	.share-button::after {
		border: none;
	}

	.desc-container {
		position: relative;
	}

	.desc {
		font-size: 14px;
		line-height: 40rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		transition: all 0.3s;
		margin-bottom: 6rpx;

	}

	.desc-expanded {
		-webkit-line-clamp: unset;
	}

	.expand-btn {
		color: #fff;
		font-size: 24rpx;
		padding: 4rpx 0;
		opacity: 0.9;
		display: inline-block;
	}

	.container {
		width: 100%;
		height: 100vh;
		position: relative;
		background-color: #000;
		overflow: hidden;
	}

	.video-container {
		position: relative;
		width: 100%;
		/* height: calc(100vh - 44px); */
		height: 100vh;
		background-color: #000;
	}

	.video {
		width: 100%;
		height: 100vh;
		height: 100vh;
		/* margin: 44px 0; */
	}

	.back-btn {
		position: fixed;
		top: 10px;
		/* 适配状态栏高度 */
		/* left: 15px; */
		z-index: 100;
		display: flex;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.3);
		/* padding: 6px 12px; */
		border-radius: 20px;
	}

	.back-text {
		color: #fff;
		font-size: 14px;
		margin-left: 4px;
	}

	.right-actions {
		position: fixed;
		right: 15px;
		bottom: 120px;
		z-index: 100;
	}

	.user-avatar {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		overflow: hidden;
		margin-bottom: 20px;
	}

	.user-avatar image {
		width: 100%;
		height: 100%;
	}

	.action-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20px;
	}

	.action-num {
		color: #fff;
		font-size: 10px;
		margin-top: 10px;
	}

	.buy-area {
		position: absolute;
		left: 0;
		bottom: 240rpx;
		/* 调整位置，确保不被其他元素遮挡 */
		width: 80%;
		padding: 0 20rpx;
		transform: translateX(-100%);
		transition: transform 0.3s ease-out;
		z-index: 10;
	}

	.buy-area-show {
		transform: translateX(0);
	}

	.buy-container {
		background: rgba(0, 0, 0, 0.4);
		border-radius: 20rpx;
		padding: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.buy-user-info {
		display: flex;
		align-items: center;
	}

	.buy-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 5%;
		margin-right: 20rpx;
	}

	.author-view {
		width: 80rpx;
		height: 80rpx;
		border-radius: 5%;
		/* margin-right: 20rpx; */
		position: relative;
		background-size: cover;
	}

	.author-avatar {
		position: absolute;
		bottom: 0px;
	}

	.buy-text {
		color: #fff;
		margin-left: 10px;
	}

	.buy-title {
		font-size: 30rpx;
		font-weight: bold;
		display: block;
	}

	.buy-desc {
		font-size: 24rpx;
		opacity: 0.8;
		display: block;
	}

	.buy-btn {
		background: #ff9933;
		color: #fff;
		padding: 10rpx 16rpx;
		border-radius: 10rpx;
		font-size: 26rpx;
	}

	.bottom-info {
		position: absolute;
		left: 15px;
		bottom: 30px;
		color: #fff;
		width: 80%;
	}

	.title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
		margin-top: 10px;
		line-height: 100%;
	}


	.user-info {
		font-size: 14px;
	}

	.username {
		margin-right: 10px;
	}

	.id {
		margin-right: 10px;
		opacity: 0.8;
	}

	.copy {
		padding: 2px 8px;
		border: 1px solid #fff;
		border-radius: 12px;
	}

	.qr-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1000;
	}

	.modal-content {
		background-color: #fff;
		border-radius: 12px;
		/* 	padding: 20px;
		width: 280px; */
		position: relative;
	}

	.close-btn {
		position: absolute;
		top: 0px;
		right: 0px;

	}

	.qr-title {
		text-align: center;
		font-size: 14px;
		color: #333;
		margin-bottom: 15px;
		margin-top: 10px;
	}

	.qr-image {
		width: 200px;
		height: 200px;
		margin: 0 auto;
		display: block;
	}

	/* 评论弹窗样式 */
	.comment-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 1000;
		transition: all 0.4s ease;
	}

	.comment-content {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		border-radius: 20px 20px 0 0;
		height: 60vh;
		display: flex;
		flex-direction: column;
	}

	.comment-body {
		flex: 1;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.comment-header {
		position: relative;
		padding: 20px;
		width: 100%;
		border-bottom: 1px solid #eee;
		/* display: flex; */
		/* justify-content: space-between; */
		text-align: center;
		align-items: center;
	}

	.comment-title {
		color: gray;
	}

	.comment-list {
		flex: 1;
		overflow-y: auto;
		padding: 0 15px;
		width: 100%;
		box-sizing: border-box;
	}

	.comment-item {
		padding: 15px 0;
		border-bottom: 1px solid #eee;
		width: 100%;
		position: relative;
		box-sizing: border-box;
	}

	.comment-user {
		display: flex;
		align-items: center;
		position: relative;
		margin-bottom: 8px;
		width: calc(100% - 45px);
		box-sizing: border-box;
	}

	.comment-avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		margin-right: 12px;
		flex-shrink: 0;
	}

	.comment-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	.comment-name {
		font-size: 14px;
		color: #333;
		margin-bottom: 2px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.comment-time {
		font-size: 12px;
		color: #999;
	}

	.delete-btn {
		position: absolute;
		right: 0px;
		top: 15px;
		font-size: 12px;
		color: #999;
		padding: 4px 8px;
		background-color: #f5f5f5;
		border-radius: 4px;
		width: 40px;
		text-align: center;
	}

	.comment-text {
		font-size: 14px;
		color: #333;
		line-height: 1.4;
		/* padding-left: 52px; */
		width: calc(100% - 45px);
		box-sizing: border-box;
		word-break: break-all;
	}

	.comment-input-area {
		padding: 10px 15px;
		border-top: 1px solid #eee;
		background-color: #fff;
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.input-avatar {
		width: 32px;
		height: 32px;
		border-radius: 50%;
	}

	.comment-input {
		flex: 1;
		height: 36px;
		background-color: #f5f5f5;
		border-radius: 18px;
		padding: 0 15px;
		font-size: 14px;
	}

	.send-btn {
		padding: 6px 12px;
		background-color: #ccc;
		color: #fff;
		border-radius: 15px;
		font-size: 14px;
	}

	.send-btn-active {
		background-color: #ff6b00;
	}

	.no-comment {
		text-align: center;
		color: #999;
		padding: 30px 0;
	}

	.close-comment {
		padding: 5px;
		position: absolute;
		right: 20px;
		top: 15px;
	}

	.swiper {
		width: 100%;
		height: 100vh;
		/* height: calc(100vh - 44px); */
	}



	.pause-icon {
		position: absolute;
		left: 45%;
		top: 40%;


	}






	/* 积分弹窗样式 */
	.mask {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 2000;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.75);
		display: flex;
		align-items: center;
		justify-content: center;
	}


	.card {
		position: relative;
		width: 70%;
		/* background-color: #fff9f1; */
		/* border-radius: 40rpx; */
		text-align: center;
		/* padding: 20rpx 10rpx; */
		/* box-shadow: 4rpx 4rpx 10rpx rgba(0, 0, 0, 0.2); */
		/* animation: slide-up 200ms; */
	}

	.card-img {
		width: 250rpx;
		height: 250rpx;
		display: inline-block;
		position: absolute;
		left: 0;
		right: 0;
		margin: 0 auto;
		top: -70px;
	}


	.card-msg {
		color: #af4c2c;
		line-height: 1.4;
		margin-bottom: 0.5em;
		font-size: 24rpx;
	}

	.num1 {
		color: orangered;
		font-weight: 1500;
		padding: 0 0.2em;
		font-family: "AlibabaPuHuiTiB";
	}

	.num2 {
		color: orangered;
		font-weight: bold;
		padding: 0 0.2em;
		font-weight: 900;
		font-family: "AlibabaPuHuiTiB";
	}

	.card-btn {

		background-color: #ff9933;
		color: #fff;
		margin: 0 auto;
		width: 10em;
		font-size: 30rpx;
		margin-top: 15px;
		border-radius: 1em;
		padding: 7px 10px 7px 10px;

	}

	.close {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
		color: #e3b99d;
		font-size: 24rpx;
		padding: 10rpx;
	}

	@keyframes slide-up {
		from {
			transform: translateY(20px);
			opacity: 0;
		}

		to {
			transform: translateY(0);
			opacity: 1;
		}
	}

	.hover {
		opacity: 0.8;
		transform: scale(0.98);
	}
</style>